<template>
  <div>
    <!--轮播图-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in images" :key="item.id"><a :href="item.img_href"><img :src="item.img_url" alt=""></a></mt-swipe-item>
    </mt-swipe>
  <!-- 九宫格-->
   <ul class="mui-table-view mui-grid-view mui-grid-9">
  		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/HomeContainer/NewList">
                      <img src="../images/资讯.png" alt="">
                      <div class="mui-media-body">资讯</div>
                     </router-link></li>
  		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/HomeContainer/PhotoList">
  		                    <img src="../images/轻小说.png" alt="">
  		                    <div class="mui-media-body">轻小说</div>
                     </router-link></li>
  		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                     <router-link to="/HomeContainer/BookList">
  		                    <img src="../images/日漫.png" alt="">
  		                    <div class="mui-media-body">漫画商城</div>
                     </router-link></li>
  		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
  		                    <img src="../images/动画.png" alt="">
  		                    <div class="mui-media-body">动画</div></a></li>
  		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
  		                    <img src="../images/排行榜.png" alt="">
  		                    <div class="mui-media-body">排行榜</div></a></li>
  		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
  		                    <img src="../images/个人中心.png" alt="">
  		                    <div class="mui-media-body">个人中心</div></a></li>
  		        </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return {
          images:[
            {
              id:1,
              img_url:"https://manhua.qpic.cn/vertical/0/13_14_14_2908dee17c39620a5185ac95767f6583_1497334441884.jpg/420",
              img_href:'https://ac.qq.com/Comic/ComicInfo/id/531490'
            },
            {
              id:2,
              img_url:"https://manhua.qpic.cn/vertical/0/30_13_06_0f73c7f226303185f0f6d1935d27f398_1585544813567.jpg/420",
              img_href:"https://ac.qq.com/Comic/ComicInfo/id/624570"
            },
            {
              id:3,
              img_url:"https://manhua.qpic.cn/vertical/0/17_16_12_cd4e6fe51036f100d5f2c1eb1289788e.jpg/420",
              img_href:"https://ac.qq.com/Comic/ComicInfo/id/518333"
            },
          ]
      }
    },
    methods:{
             //跨域问题未解决 没用上vue-resource
      }
    }
</script>

<style scoped>
 .mint-swipe{
    height: 200px;
  }

img{
  width: 100%;
  height:100%;
}
.mui-grid-view mui-grid-9{
  background-color: #fff;
  border: none;
}
li img{
  width: 60px;
  height: 60px;
}
</style>
